<template>
  <div class="mp-view_left">
    <div class="view_left-tpi">
      <div class="left-tpi-t">页面预览</div>
      <ul class="left-tpi-ul">
        <li class="left-tpi-li" v-for="(item,index) in viewModel" :key="index" @click="previewTab(item)">{{item.name}}</li>
      </ul>
    </div>
    <!-- <div class="view_left-tpi">
      <div class="left-tpi-t">组件预览</div>
      <ul class="left-tpi-ul">
        <li class="left-tpi-li" v-for="(item,index) in 100" :key="index">后台模板</li>
      </ul>
    </div> -->
  </div>
</template>
<script>
  export default {
    props: {
      viewModel: {}
    },
    methods: {
      previewTab (val) {
        this.$emit('leftChang', val)
      }
    }
  }
</script>
<style lang="scss">
  .mp-view_left {
    width: 200px;
    height: 100%;
    display: flex;
    flex-direction: column;

    .view_left-tpi {
      width: 100%;
      flex: 1;
      min-height: 0;
      border: 1px solid #e5e5e5;
      border-radius: 6px;
      display: flex;
      flex-direction: column;

      .left-tpi-t {
        border-bottom: 1px solid #e5e5e5;
        font-size: 14px;
        padding: 15px 20px;
      }

      .left-tpi-ul {
        flex: 1;
        min-height: 0;
        overflow: auto;

        .left-tpi-li {
          font-size: 13px;
          padding: 8px 0;
          padding-left: 40px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          cursor: pointer;
          color: #676c7b;

          &:hover {
            background-color: #f5f5f5;
          }
        }
      }
    }

    .view_left-tpi:nth-child(1) {
      margin-bottom: 15px;
    }
  }
</style>